<style scoped>
.phone {
  background-color: #f1f1f1;
  padding-right: 20px;
  position: relative;
}
.phoneBox {
 
  overflow: hidden;
  background-color: #fff;
  border-radius: 50px;
  
  height: 810px;
}
.phonewrap{
  height: 810px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: -20px;
}
.phoneBottom{
  position: absolute;
  left: 0;
  right: 20px;
  bottom: 0;
  background: #fff;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
.phoneNav img{
  display: block;
  width: 100%;
}
.liuhai {
  position: absolute;
  width: 60%;
  left: 20%;
  top: 0;
  height: 40px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: #fff;
  z-index: 50;
  border: 1px solid #f0f3f8;
}
.addSlide {
  display: flex;
  display: -webkit-flex;
  margin: 0 5px;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.slideLeft,
.slideRight {
  width: 50%;
  box-sizing: border-box;
}
.slide {
  padding: 0 5px;
  position: relative;
}
.slide1 .img {
  height: 120px;
}
.slide2 .img,
.slide5 .img {
  /* padding-left: 5px; */
  height: 135px;
}
.slide3 .img,
.slide4 .img {
  /* padding-left: 5px; */
  height: 150px;
}
.slide3,
.slide4 {
  width: 50%;
  margin-top: 5px;
  box-sizing: border-box;
  display: inline-block;
  float: left;
}
.slide3 {
  /* padding-right: 5px; */
}
.slide4 {
  /* padding-left: 5px; */
}
.slide5 {
  margin-top: 5px;
  box-sizing: border-box;
  display: inline-block;
}
.img {
  width: 100%;
  border-radius: 3px;
}
.resetBtn {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  text-align: center;
  top: 0;
  left: 5px;
  right: 5px;
  padding: 5px 0;
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
}
.hot {
  margin-bottom: 50px;
  background-color: #f0f0f0;
}
.insure-list{
  border-bottom: 1px solid #f4f4f4;
}
.hotTitle {
  margin-top: 10px;
  margin-bottom: 5px;
  /* background-color: #EEE; */
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  border-top: 1px solid #eee;
}
.hotList {
  padding: 10px;
  background-color: #fff;
  margin-bottom: 5px;
}
.xianzhong {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  overflow: hidden;
}
.xianImg {
  text-align: center;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
}
.insure-tag{
  vertical-align: middle;
  line-height:normal;
  padding: 3px 5px;
  color: #fff;
  border-radius: 3px;
}
.bgyellow{
  background-color: #ff9e2b;
}
.bggreen{
  background-color: #2db644;
}
.content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 25px;
  line-height: 25px;
  color: #757677;
}
.center {
  text-align: center;
  color: #6c6c6c;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #eee;
}
.center.active {
  color: #5ba4e9;
}
.wraper {
  padding: 0 20px;
  margin-bottom: 30px;
}

.search {
  padding-bottom: 20px;
}

.search span {
  color: #68777c;
  font-weight: bold;
  padding-right: 18px;
}

.search button {
  background-color: #00a8f7;
  color: #fff;
  margin-left: 8px;
}

.top {
  margin-bottom: 20px;
  border-top: 1px dashed #cccccc;
}

.wraper .headline {
  position: relative;
  font-size: 12px;
  color: #303134;
  font-weight: bold;
  margin: 10px 0;
  line-height: 32px;
}

.wraper .add-agent {
  position: absolute;
  top: 0px;
  right: 30px;
  background-color: #348bf2;
  color: #fff;
}

.iconfont {
  font-size: 14px;
}

.red-font {
  color: #ff1f1f;
}

.fixed-bottom {
  position: absolute;
  bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
  height: 80px;
  line-height: normal !important;
  /* left: 210px; */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide {
  left: 75px;
}

/* 表格样式 start*/

.pro-card {
  margin-bottom: 10px;
}

.pro-card-head {
  background-color: #e6e7eb;
  line-height: 38px;
  border: 1px solid #ddd;
}

.pro-card-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding-left: 20px;
}

.pro-card-headr {
  padding-right: 10px;
  text-align: right;
}

.pro-card-content {
  clear: both;
}

.pro-paramname {
  text-align: center;
  background-color: #e6e7eb;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #ddd;
}

.pro-paramvalue {
  padding-left: 10px;
  border-right: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pro-card-contentrow {
  line-height: 40px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 表格样式  end */

/* 分页 start */

.page {
  margin: 0;
}

.ivu-page {
  padding-bottom: 150px;
}

.wu.common-box-body .ivu-form-item {
  padding-right: 0;
  margin-bottom: 24px;
}
/* 分页 end */

.iconclass {
  display: inline-block;
  width: 58px;
  background: #fff;
  border: 1px dashed #757f98;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  height: 58px;
  line-height: 58px;
  vertical-align: middle;
  margin-left: 8px;
  margin-right: 15px;
}
.cropper-wrapper {
  margin-top: 10px;
  height: 400px;
}
.cropper-box {
  height: 300px;
}
.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c0ccda;
  color: #1f2d3d;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 20px 10px 0px 0px;
  padding: 9px 15px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #50bfff;
  border-color: #50bfff;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
}
.policy-manage {
  position: relative;
  height: 810px;
}
.app-status{
  margin-bottom: 20px;
  
}
.app-status img{
  display: block;
  width: 100%;
}
.insure-list{
  padding-left: 10px;
  background: url('../../asset/img/app_list_bg.jpg') no-repeat left center;
}
.insure-tag{
  display: inline-block;
  font-size: 12px;
}
.pro-tag{
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f4f4f4;
}
.pro-label{
  color: #FD1E1F;
}
.pro-label i{
  font-size: 16px;
  margin-right: 5px;
}
.pro-label-span{
  margin-right: 15px;
}
</style>
<style>
.phoneSlide .ivu-carousel-list {
  /* border-radius: 50px 50px 0 0 !important; */
  overflow: hidden !important;
}
.a-link {
  color: #4074e1;
  text-decoration: underline;
  cursor: pointer;
}
.lunbo .ivu-modal-body {
  padding: 15px 20px 0 20px;
}
.lunbo .ivu-modal-content {
  border-radius: 3px;
}
.shenglue .demo-table-info-column{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

<template>
    <div>
        <Row>
            <i-col span="6" class="phone">
                <div class="phoneBox" >
                  <div class="phonewrap">
                    <div>
                      <div class="liuhai"></div>
                      <div class="app-status">
                        <img src="../../asset/img/status_bar.png" />
                      </div>
                      <div style="border-radius:50px;">
                          <div style="background-color:#FFF;" class="phoneNav">
                              <img src="../../asset/img/app_nav.jpg">
                          </div>                          
                          <div class="hot">
                              <div class="hotList" v-for="item in tablepro" :key="item._id">
                                  <Row class="insure-list">
                                      <i-col span="16" class="xianzhong">
                                          <h4>{{item.pname}}</h4>
                                      </i-col>
                                      <i-col span="8" style="text-align:center">
                                        <div class="xianImg text">
                                          <span class="insure-tag bgyellow">推荐</span>
                                          <span class="insure-tag bggreen">最新</span>
                                        </div>
                                          
                                      </i-col>
                                  </Row>
                                  <Row class="pro-tag">
                                    <i-col span="12" style="padding-right:5px;" v-for="(sitem,index) in item.attr" :key="index">
                                      <Row>
                                        <i-col span="10">
                                            <div class="content" >
                                              {{sitem.key}}
                                            </div>
                                        </i-col>
                                        <i-col span="14" class="content">
                                            {{sitem.value}}
                                        </i-col>
                                      </Row>
                                    </i-col>    
                                  </Row>
                                  <div class="pro-label">
                                    <span class="pro-label-span" v-for="(sitem,sindex) in item.label" :key="sindex">
                                      <i class="icon iconfont icon-xuanze1"></i>{{sitem}}
                                    </span>
                                  </div>
                              </div>
                          </div>                       
                      </div>
                    </div>
                  </div>
                  
                </div>
                <div class="phoneBottom">
                  <Row>
                      <i-col span="6" class="center active">首页</i-col>
                      <i-col span="6" class="center">产品</i-col>
                      <i-col span="6" class="center">发现</i-col>
                      <i-col span="6" class="center">我的</i-col>
                  </Row>
                </div>
            </i-col>
            <i-col span="18">
                    <div class="policy-manage">
                        <productTitle></productTitle>
                        
                        <div class="wraper">
                            <Tabs type="card" :animated="false">
                                <TabPane label="新增推荐险种管理" name="pro">
                                    <div class="pro-con-f common-box-body">
                                        <Row>
                                                <Col span="24" class="table-action" >
                                                    <Button v-if="$isShow('app_recomment/create')" type="warning" size="large" @click="openProModal" class="fr" icon="plus" >新增推荐险种</Button>
                                                </Col>
                                        </Row>
                                    </div>
                                    <div class="detail">
                                        <div class="clearfix">
                                            <div class="table-theme highlight_table shenglue">
                                                <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns2" :data="tablepro" class=""></Table>
                                            </div>                        
                                        </div>
                                    </div>
                                </TabPane>
                            </Tabs>    
                            
                        </div>
                        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                            <Row class="pro-pagesize">
                                <Col :md="24" :lg="8">
                                    <Button v-if="$isShow('app_recomment/del')" type="error" :disabled="tableaction"  size="large" class="fl mr10 " @click="proDel">删除</Button>
                                    <Button v-if="$isShow('app_recomment/update')" type="info" :disabled="tableaction"  size="large" class="fl mr10" @click="proUpdate">编辑</Button> 
                                </Col>
                                <Col :md="24" :lg="16" >
                                <div style="text-align:right">
                                    <Page ref="pages"  :total="listTotal" show-total :page-size="proForm.pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                                </div>
                                </Col>
                            </Row>
                        </div>
                    </div>
            </i-col>
        </Row>
       
        <Modal v-model="proModal" title="新增推荐险种" okText="提交" :loading="modalLoading5" @on-ok="proSubmit" @on-cancel="proBack" width="500" :mask-closable = 'false' :closable = "false" class="lunbo">
            <div class="common-box-body wu" >
                <Form :model="proForm" ref="proForm" :rules="proFormValidate">
                    <Row>
                        <i-col span="24">
                            <FormItem label="产品">
                                <Select v-model="proForm.id" placeholder="请选择产品" v-if="!recomtag">
                                    <Option v-for="item in recommendProlist" :value="item._id" :key="item.pname">{{item.pname}}</Option>
                                </Select>
                                <Input v-model="proForm.pname" :disabled="disabled" v-else></Input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col span="24">
                            <FormItem label="排序" prop="pw">
                              <i-input v-model="proForm.pw"   placeholder="请输入排序"></i-input>
                            </FormItem>
                        </i-col>
                    </Row> 
                </Form>
            </div>
        </Modal>
    </div>
   
</template>
<script>
import productTitle from "../../components/productTitle";
import { get_all_new , add_new , get_new , update_new , del_new } from '../../api/app_pro_repository'
export default {
  data() {
    return {
      recomtag:0,
      disabled:false,
      proModal:false,
      proForm:{
          p:1,
          pagesize:8,
          px:0,
          id:''
      },
      recommendProlist:[],
      listTotal: 0,
      modalLoading5: true,
      tableloading: true,
      tableaction: true,
      currentRow: {},
      columns2:[
        {
          title: "排序",
          key: "pw",
          width: "80",
          align: "center"
        },
        {
          title: "产品名称",
          key: "pname",
          align: "center"
        },
        {
          title: "说明",
          key: "attr",
          align: "center",
          render:(h,params)=>{
            let _attr = params.row.attr;
            let html = "";
            _attr.forEach(item => {
              html += item.key + ":" + item.value + "   ";
            });
              return h('div',{
                'class': 'demo-table-info-column',
              },html)
          }
        },
        {
          title: "标签",
          key: "label",
          align: "center",
          render:(h,params)=>{
            let _label = params.row.label;
            let html = _label.join("|");
              return h('div',{
                'class': 'demo-table-info-column',
              },html)
          },
        },
        {
          title: "创建时间",
          key: "create_timed",
          align: "center",
        }
      ],
      tablepro:[],
      proFormValidate:{
        pw:[
            {  message: '只能输入数字', trigger: 'blur,change',pattern:/^[0-9]+$/ }
            
        ],
      },
    };
  },
  components: {
    productTitle,
  },
  computed: {
    slidetoggle() {
      return this.$store.state.sildeshow;
    }
  },
  mounted() {
    // this.getPro();
    this.getRecomPro();
  },
  methods: {
    cancel(){
      document.getElementById("upload2").value  = ''
      this.$refs.cropper.refresh()
    },
    //更新推荐险种
    proUpdate(){
      this.proForm.id =  this.currentRow._id
      this.proForm.pname  =  this.currentRow.pname
      this.proForm.pw = this.currentRow.pw
      this.proModal = true
      this.recomtag = 1
      this.disabled = true;
    },
    proDel(){
      this.$Modal.confirm({
        title: "提示",
        content: "是否要删除该条信息?",
        onOk: () => {
          let _params = {
            id:this.currentRow._id
          }
          new Promise((resolve, reject) => {
            del_new(_params)
              .then(response => {
                if (response.data.err == 0) {
                    this.getRecomPro()
                } else {
                  this.$Message.error(response.data.info);
                  
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
        }
      });
    },
    //获取  在热门推荐列表
    getRecomPro(){
      this.tableloading = true
      let _params = {
        p:this.proForm.p,
        pagesize:this.proForm.pagesize
      }
      new Promise((resolve, reject) => {
        get_new(_params)
          .then(response => {
            if (response.data.err == 0) {
                this.tablepro = response.data.data.list
                this.listTotal = response.data.data.total
                this.getPro()
            } else {
              this.$Message.error(response.data.info);
              
            }
            this.tableloading = false
            resolve();
          })
          .catch(error => {
            reject(error);
          });
          this.tableloading = false
      });
      
    },
    //获取  可推荐险种
    getPro(){
      new Promise((resolve, reject) => {
        get_all_new()
          .then(response => {
            if (response.data.err == 0) {
              this.recommendProlist = response.data.data
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    proSubmit(){
      this.$refs['proForm'].validate((valid) => {
        if(valid){
          if(this.recomtag == 0){
        new Promise((resolve, reject) => {
          add_new(this.proForm)
              .then(response => {
                if (response.data.err == 0) {
                    this.$Message.success(response.data.info);
                    this.proModal = false  
                    this.$refs['proForm'].resetFields();
                    this.proForm = {
                    }
                    this.getRecomPro()
                    location.reload();
                } else {
                   if(response.data.err==1201){
                      this.$Message.error('请完善信息');
                    }else{
                      this.$Message.error(response.data.info);
                    }
                    let _this = this;
                    setTimeout(() => {
                      _this.modalLoading5 = false;
                      _this.$nextTick(()=>{
                        _this.modalLoading5=true;
                    })

                  }, 2000);
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
      }else{
        this.proForm.id = this.currentRow._id
        new Promise((resolve, reject) => {
          update_new(this.proForm)
              .then(response => {
                if (response.data.err == 0) {
                    this.$Message.success(response.data.info);
                    this.proModal = false  
                    this.proForm = {}
                    this.getRecomPro()
                    location.reload();
                } else {
                  if(response.data.err==1201){
                      this.$Message.error('请完善信息');
                    }else{
                      this.$Message.error(res.data.info);
                      
                    }
                    let _this = this;
                  setTimeout(() => {
                      _this.modalLoading5 = false
                      _this.$nextTick(()=>{
                        _this.modalLoading5=true;
                      })
                  }, 2000);
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
      }  
        }else{
         let _this = this;
              setTimeout(() => {
                this.modalLoading5 = false;
                _this.$nextTick(() => {
                  _this.modalLoading5 = true;
                });
              }, 1000);
        }
      })
         
    },
    proBack(){

    },
    //新增推荐险种
    openProModal(){
      this.recomtag = 0
      this.proModal = true
      this.proForm = { }
      this.disabled= false;
    },

    tableCurrentChange(currentRow, oldCurrentRow) {
      this.tableaction = false;
      this.currentRow = currentRow;
    },

    // 页码改变
    pageChange(page) {
      this.proForm.p = page;
        this.getRecomPro();
    },
    // 每页条数改变
    pageSizeChange(pagesize) {
        this.proForm.p = 1;
      this.proForm.pagesize = pagesize;
      this.getRecomPro();
    },
  }
};
</script>